<template>
  <div class="companyDetailWrap">
    <div class="detailHeader">
      <span style="text-indent: 5px;letter-spacing:3px;">新增模板</span>
      <div class="iconWrap">
        <router-link to="/templateSet"><i class="iconfont icon-fanhui"></i></router-link>
      </div>
    </div>
    <div>
      <span style="margin:20px 5px 0px 40px;display: inline-block;">模板名称:</span>
      <el-input
        style="width: 200px;"
        placeholder="模板名称"
        clearable
        :maxlength="50"
        v-model="templateName"
        size="mini"
    >
    </el-input>
      <div style="float: right;margin-right: 10px;margin-top: 20px;">
          <el-button
            type="primary"
            size="mini"
            @click="handleDiaSureAdd"
          >提交
          </el-button>
      </div>
    </div>
    <div class="tableContainer">
      <div class="tableInner" ref="tableInner">
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          :height="tableHeight"
          @selection-change="changeFun"
          :span-method="objectSpanMethod"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="指标类别"
            prop="classifyName"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="类别分值"
            prop="classifyScore"
            show-overflow-tooltip
          >

          </el-table-column>
          <el-table-column
            prop="itemsName"
            label="指标项"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="itemsName"
            label="指标分值"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input style="width: 100%;" size="mini" type="number" :maxlength="10"  v-model.number="scope.row.standardScore" @input="getclassifyScore(scope.$index)"   autocomplete="off" placeholder="数字" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="指标描述"
            prop="itemsDesc"
            show-overflow-tooltip>

          </el-table-column>
          <el-table-column
            label="评分标准"
            prop="scoreRule"
            show-overflow-tooltip
            >
            <template slot-scope="scope">
              <div style="float: left;">
                {{scope.row.scoreRule}}
              </div>

            </template>
          </el-table-column>
          <el-table-column
            label="责任部门"
            prop="g"

          >
            <template slot-scope="scope">
              <el-row>
                <el-col v-show="scope.row.hasRoadTransport"  :span="12">
                  <span >市交通局</span>
                </el-col>
                <el-col v-show="scope.row.hasCityManage"  :span="12">
                  <span >市城管局</span>
                </el-col>
                <el-col v-show="scope.row.hasTraffic" :span="12">
                  <span  >市交警局</span>
                </el-col>
                <el-col v-show="scope.row.hasAreaGov" :span="12">
                  <span >各区政府</span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="附件管理"
            prop="hasAttachment"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.hasAttachment ? "有附件" : "无附件"}}
              </template>
          </el-table-column>
          <el-table-column
            label=""
            type="selection"
            @selection-change="changeFun"
            width="55">
          </el-table-column>
        </el-table>
        <div style="line-height: 40px;border-bottom: 1px solid #ebeef5"><span style="display:inline-block;width: 50%;text-align: center;color: grey;border-right:  1px solid #ebeef5;">总分：{{totalScore}} 分</span><span style="display: inline-block;width: 49%;text-align: center;color: grey;">指标项：{{multipleSelection.length}} 项</span></div>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    name: 'editor',
    data() {
      return {
        rows: [],
        spanArr: [],
        multipleSelection: [],
        templateInfoList: [],
        tableHeight: 400,
        templateName: "",
        totalScore:0,
        noScore:false
      }
    },
    components: {},
    created(){
     this.getExamineInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".companyDetailWrap").clientHeight - 160
      })
    },
    methods: {
      //      数组去重
      arrayUnique(arr, name) {
        var hash = {};
        return arr.reduce(function (item, next) {
          hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
          return item;
        }, []);
      },
      //提交回调
      handleDiaSureAdd(){
        if(!this.templateName){
          this.$message({
            type: 'warning',
            message: "请输入模板名称"
          });
          return
        }else if(this.noScore){
          this.$message({
            type: 'warning',
            message: "请检查指标分值不能为空"
          });
          return
        }else if(this.multipleSelection.length==0){
          this.$message({
            type: 'warning',
            message: "请勾选参与考核指标项"
          });
          return
        }else if(this.totalScore!=100){
          this.$message({
            type: 'warning',
            message: "总分要等于100分"
          });
          return
        }
        this.$confirm('是否创建新考核模板 “'+this.templateName+'”', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + '/examine/insertTemplate',{templateName:this.templateName,templateInfoList:this.templateInfoList})
            .then(response => {
              if (response.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                });
                this.$emit('getTempalteInfo')
                setTimeout(()=>{
                  this.$router.push("/templateSet")
                },1000)
              }

            })
            .catch(error => {
              console.log(error);
            });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消创建'
          });
        });

      },
      //全选
      changeFun(val) {
        if(val){
          this.multipleSelection = val
        }
        this.totalScore=0
        this.templateInfoList=[]
        //组装数组
        let newArr=this.arrayUnique(this.multipleSelection,"classifyId")
        newArr.forEach(item=>{
          this.templateInfoList.push({
            classifyId:item.classifyId,
            classifyName:item.classifyName,
            itemList:[]
          })
        })
        this.noScore=false
        this.multipleSelection.forEach(item=>{
          this.totalScore+=this.toDecimal(item.standardScore)
          if(!item.standardScore){
            this.noScore=true
          }
          this.templateInfoList.forEach(item1=>{
            if(item1.classifyId==item.classifyId){
              item1.itemList.push(item)
            }
          })
        })
      },
      //获取所有信息
      getExamineInfo(){
        this.axios.post(process.env.API_HOST + `/examine/selectItemsData`,{itemsName:"", })
          .then(response => {
            let result = response.data
            if(result.code==200){
              this.rows=[]
              result.result.forEach(item=>{
                item.itemList.forEach(item1=>{
                  this.rows.push({...item1,classifyId:item.classifyId,classifyName:item.classifyName,standardScore:"",classifyScore:""})
                })
              })
              this.spanArr=this.getSpanArr(this.rows,"classifyName")
            }
          })

      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0||columnIndex === 1) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      getclassifyScore(index){
        let sub=0,isPass=true,classifyScore=0
        this.spanArr.forEach(item=>{
          sub+=item
          if(isPass&&sub>index){
            isPass=false
            const sliceArr = this.rows.slice(sub-item,sub)
            sliceArr.forEach(item=>{
              classifyScore+=this.toDecimal(item.standardScore)
            })
            sliceArr.forEach(item=>{
              item.classifyScore=classifyScore
            })
          }
        })
        this.changeFun()
      },
    },
    computed: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .companyDetailWrap
    page1()
    .detailHeader
      background-color: #ECF5FF;
      text-align: center;
      color: #3975FE;
      line-height: 35px;
      font-size: 20px;
      font-weight: bold;
      span
        font-weight bold
      .iconWrap
        float: right;
        margin-right: 15px;
        color: white;
        .iconfont
          color: #3975FE;
          &:hover
            opacity 0.8
    .tableContainer
      padding 20px 20px 100px 20px
      background-color white
      border-radius 5px
      margin 0 auto
      .tableInner //表格滚动
        width 100%
        overflow-y auto

</style>
